<template>
	<div class="organizationInfo">
		<div class="title">裁判员信息</div>
		<div class="line"></div>
		<div class="orgInfos">
			<div class="orgInfo">
				<div>
					<p>裁判姓名：<span>{{orgInfo.name}}</span></p>
				</div>
				<div>
					<p class="logo">证件类型：
						<span v-if="orgInfo.card_type==0">身份证</span>
						<span v-if="orgInfo.card_type==1">护照</span>
					</p>
				</div>
			</div>
			<div class="orgInfo">
				<div>
					<p>证件号码：<span>{{orgInfo.id_card}}</span></p>
				</div>
				<div>
					<p class="logo">学历：
						<span v-if="orgInfo.education == 0">专科</span>
						<span v-if="orgInfo.education == 1">本科</span>
						<span v-if="orgInfo.education == 2">硕士</span>
						<span v-if="orgInfo.education == 3">博士</span>
					</p>
				</div>
			</div>
			<div class="orgInfo">
				<div>
					<p>裁判级别：
						<span v-if="orgInfo.ref_grade == 0">国际级</span>
						<span v-if="orgInfo.ref_grade == 1">国家级</span>
						<span v-if="orgInfo.ref_grade == 2">一级</span>
						<span v-if="orgInfo.ref_grade == 3">二级</span>
						<span v-if="orgInfo.ref_grade == 4">三级</span>
					</p>
				</div>
				<div>
					<p class="logo">民族：{{orgInfo.nation}}</p>
				</div>
			</div>
			<p class="info">
				<span>所在省市：{{orgInfo.province}}</span>
			</p>
			<p class="info">
				<span>电子邮箱：{{orgInfo.email}}</span>
			</p>
			<p class="info">
				<span>工作单位：{{orgInfo.address}}</span>
			</p>
			<p class="prove">资质证明：<img :src="orgInfo.prove" alt="" @click="preview"></p>
			<p class="prove">驳回理由：<el-input v-model="rejected" placeholder="请输入驳回理由，通过则无需输入" autosize style="width: 400px;height: 70px"
				 type="textarea"></el-input>
			</p>
		</div>
		<div class="line" style="margin-left: 70px"></div>
		<div style="text-align: center;margin-top: 64px">
			<el-button type="primary" @click="operation(1)">通过</el-button>
			<el-button type="warning" @click="operation(2)">驳回</el-button>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="orgInfo.prove" alt="" v-if="orgInfo.prove != '' || orgInfo.prove != null">
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				orgInfo: '',
				rejected: '',
				user_id: '',
				dialogVisible: false,
			}
		},
		created() {
			this.getClubInfo()
		},
		methods: {
			getClubInfo() {
				this.$axios.post('/UserManage/ref_info', {
						user_id: this.$route.query.umpireListId,
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.orgInfo = res.data.data
							this.user_id = res.data.data.user_id
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			operation(status) {
				this.$axios.post('/UserManage/audit_user', {
						type: 1,
						status: status,
						rejected: this.rejected,
						user_id: this.user_id,
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.$message({
								type: 'success',
								message: res.data.msg
							})
							this.$router.go(-1)
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			preview() {
				this.dialogVisible = true;
			},
		}
	}
</script>
<style lang="less" scoped>
	.prove {
		display: flex;

		img {
			display: inline-block;
			width: 336px;
			height: 215px;
			border: 1px #ccc solid;
			padding: 20px 30px;
			border-radius: 4px;
		}
	}

	.info {
		display: flex;

		/*justify-content: space-between;*/
		textarea {
			height: 100%;
		}
	}

	.orgInfos .logo {
		display: flex;
		margin-bottom: 0;

		img {
			display: inline-block;
			width: 88px;
			height: 88px;
			border: 1px #ccc solid;
			padding: 10px;
			border-radius: 4px;
		}
	}

	.title {
		margin-left: 26px;
		margin-bottom: 12px;
		margin-top: 12px;
		font-weight: bold;
	}

	.line {
		width: 80%;
		border-top: 1px #dcdfe6 dotted
	}

	.orgInfos {
		margin-top: 31px;
		margin-left: 70px;
		width: 50%;

		p {
			margin-bottom: 34px;
		}

		.orgInfo {
			display: flex;
			justify-content: space-between;
		}
	}
</style>
